<template>
  <div class="divBox">
    <el-row :gutter="24" class="dashboard-console-grid">
      <el-col v-bind="grid" class="ivu-mb mb10">
        <el-card :bordered="false">
          <router-link :to="{path:'/department/index'}">
            <div class="row-flex">
              <i class="el-icon-office-building" style="color:#898ced;" />
              <div class="column-flex">
                <p class="nums">{{ viewData.depCount }}</p>
                <p class="title">部门数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false">
          <router-link :to="{path:'/person/index'}">
            <div class="row-flex">
              <i class="el-icon-user-solid" style="color:#fda865;" />
              <div class="column-flex">
                <p class="nums">{{ viewData.personCount }}</p>
                <p class="title">人员数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false">
          <router-link :to="{path:'/electronic/index'}">
            <div class="row-flex">
              <i class="el-icon-s-order" style="color:#26c6ff;" />
              <div class="column-flex">
                <p class="nums">{{ viewData.electronicCount }}</p>
                <p class="title">个人电子设备数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="dashboard-console-grid">
      <el-col v-bind="grid" class="ivu-mb mb10">
        <el-card :bordered="false">
          <router-link :to="{path:'/computer/index'}">
            <div class="row-flex">
              <i class="el-icon-s-platform" style="color:#fdd22d;" />
              <div class="column-flex">
                <p class="nums">{{ viewData.comCount }}</p>
                <p class="title">办公计算机数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false">
          <router-link :to="{path:'/tests/index'}">
            <div class="row-flex">
              <i class="el-icon-s-management" style="color:#898cec;" />
              <div class="column-flex">
                <p class="nums">{{ viewData.testsCount }}</p>
                <p class="title">试验信息数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false">
          <router-link :to="{path:'/incident/index'}">
            <div class="row-flex">
              <i class="el-icon-folder-opened" style="color:#ff8e86;" />
              <div class="column-flex">
                <p class="nums">{{ viewData.incCount }}</p>
                <p class="title">事件数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="dashboard-console-grid">
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false">
          <router-link :to="{path:'/modelType/index'}">
            <div class="row-flex">
              <i class="el-icon-s-order" style="color:#1e80ea;" />
              <div class="column-flex">
                <p class="nums">{{ viewData.typeCount }}</p>
                <p class="title">型号数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false">
          <router-link :to="{path:'/workshop/index'}">
            <div class="row-flex">
              <i class="el-icon-s-flag" style="color:#01c8f2;" />
              <div class="column-flex">
                <p class="nums">{{ viewData.plantCount }}</p>
                <p class="title">技术阵地/厂房数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false">
          <router-link :to="{path:'/protectionPoint/index'}">
            <div class="row-flex">
              <i class="el-icon-place" style="color:#f46b43;" />
              <div class="column-flex">
                <p class="nums">{{ viewData.proCount }}</p>
                <p class="title">保护点数量</p>
              </div>
            </div>
          </router-link>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { checkPermi } from "@/utils/permission";
import {viewModelApi} from '@/api/dashboard'
    export default {
        data () {
            return {
                viewData:{},
                grid: {
                    xl: 8,
                    lg: 8,
                    md: 6,
                    sm: 8,
                    xs: 8
                }
            }
        },
        methods:{
          checkPermi,

          statisticsNum() {
            //viewModelApi().then(async res => {
            let res = {
              "depCount": 12,
              "electronicCount": 9,
              "comCount": 4,
              "incCount": 5,
              "proCount": 3,
              "plantCount": 4,
              "typeCount": 6,
              "testsCount": 4,
              "attCount": 20,
              "personCount": 9
            }
              this.viewData = res;
            //})
          },
        },
      mounted() {
        this.statisticsNum();
      }
    }
</script>
<style lang="scss" scoped>
  .ivu-mb{
    // margin-bottom: 10px;
  }
  ::v-deep .el-card__body{
    padding:10px 10px 10px 15px!important;
  }
  .divBox {
    padding: 0 20px !important;
  }
  .row-flex{
    display:flex;
    flex-direction: row!important;
    align-items: center;
  }
  .column-flex{
    display:flex;
    flex-direction: column!important;
    text-align: left;
    margin-left:10px;
    .nums{
      font-weight:bold;
      font-size:18px;
    }
    .title{
      color: #000;
      opacity: 0.5;
    }
  }
  .dashboard-console-grid {
    text-align: center;
    .ivu-card-body {
      padding: 0;
    }
    i {
      font-size: 32px;
    }
    a {
      display: block;
      color: inherit;
    }
    p {
      margin-top: 8px;
    }
  }
</style>
